<template>
  <div>
    <!-- 搜索 -->
    <div class="search1">
      <span class="jd jd-gengduo more"> </span>
      <div class="center">
        <van-icon name="search" />
        <span class="search-hint">大前端开发，混合京东商城系统</span>
      </div>
      <span class="jd jd-talk right"></span>
    </div>
    <div class="search" :style="opacityStyle">
      <span class="jd jd-gengduo more"> </span>
      <div class="center">
        <van-icon name="search" />
        <span class="search-hint">大前端开发，混合京东商城系统</span>
      </div>
      <span class="jd jd-talk right"></span>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item.id">
        <template #default>
          <img :src="item.icon" class="bgimg" />
        </template>
      </van-swipe-item>
    </van-swipe>
    <!-- 活动 -->
    <ActiveView></ActiveView>
    <!-- 快捷入口 -->
    <SmallNav></SmallNav>
    <!-- 京东秒杀 -->
    <SeckillView></SeckillView>
    <div class="banner">
      <img src="@/assets/3.gif" alt="" />
    </div>
    <!-- 商品列表 -->
    <div class="splb">
      <GoodsList :newList="goodsList"></GoodsList>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
import { getswipe } from "@/api/swipe";
import { getGoodsList } from "@/api/goodsList";
import token from "@/utils/token";
import ActiveView from "./components/activeView.vue";
import SmallNav from "./components/smallNav.vue";
import SeckillView from "./components/seckillView.vue";
import GoodsList from "@/components/goodsList.vue";
export default {
  data() {
    return {
      list: [],
      goodsList: [],
      opacityStyle: { opacity: 0 },
    };
  },
  components: {
    ActiveView,
    SmallNav,
    SeckillView,
    GoodsList,
  },
  async created() {
    try {
      let res = await getswipe(token);
      // console.log(res);
      this.list = res.data.data.list;
      let goods = await getGoodsList(token);
      this.goodsList = goods.data.data.list;
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    handleScroll() {
      const top = document.documentElement.scrollTop; //获取scroll偏移值
      if (top > 0 && top <= 300) {
        //实际按需求取范围
        const opacity = top / 300; //对opacity作计算，透明度从起始到1随偏移值而改变
        this.opacityStyle = { opacity }; //实时返回给opacityStyle
      }
    },
  },
  updated() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style scoped lang="less">
.search1 {
  width: 100%;
  height: 60px;
  // background-color: #fff;
  padding-top: 20px;
  line-height: 30px;
  position: fixed;
  z-index: 999;
  .more {
    position: absolute;
    color: #fff;
    font-size: 30px;
    left: 10px;
  }
  .center {
    position: absolute;
    display: inline-block;
    width: 80%;
    height: 30px;
    background-color: #fff;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    .search-hint {
      margin-left: 16px;
      font-size: 14px;
      color: #999;
    }
  }
  .right {
    position: absolute;
    right: 10px;
    color: #fff;
    font-size: 30px;
  }
}
.search {
  width: 100%;
  height: 60px;
  background-color: #fff;
  padding-top: 20px;
  line-height: 30px;
  position: fixed;
  z-index: 999;
  .more {
    position: absolute;
    color: #333;
    font-size: 30px;
    left: 10px;
  }
  .center {
    position: absolute;
    display: inline-block;
    width: 80%;
    height: 30px;
    background-color: #d7d7d7;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    .search-hint {
      margin-left: 16px;
      font-size: 14px;
      color: #999;
    }
  }
  .right {
    position: absolute;
    right: 10px;
    color: #333;
    font-size: 30px;
  }
}
.bgimg {
  width: 100%;
  height: 185px;
}
/deep/.van-icon {
  padding-left: 15px;
  font-size: 16px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 185px;
  text-align: center;
  background-color: #39a9ed;
  height: 185px;
}
.banner {
  width: 100%;
  height: 230px;
  background-color: #fff;
  position: relative;
  left: 0;
  top: 187px;
  img {
    width: 100%;
  }
}
.splb {
  position: relative;
  left: 0;
  top: 200px;
}
.line {
  width: 100%;
  height: 60px;
  position: relative;
  left: 0;
  top: 230px;
}
</style>
